<template>
  <view class="comment">
    <view class="title">
      <view class="userInfo">
        <image :src="comment.user.avatar" mode=""></image>
        <view class="right">
          <h2 class="username">
            {{comment.user.username}}
          </h2>
          <p class="right_context">
            {{comment.user.time}}
          </p>
          <p class="right_context">
            {{comment.course}}
          </p>
        </view>
      </view>
      <view class="context">
        {{comment.title}}
      </view>
    </view>
    <view class="commentInfo">
      <p class="tip">
        <uni-icons type="chat" size="22" color="#55aaff"></uni-icons>评论:
      </p>
      <view class="discuss" v-for="discuss in comment.discuss" :key="discuss.username">
        <!-- <view class="discuss_info"> -->
        <image :src="discuss.avatar" mode=""></image>
        <view class="discuss_right">
          <h2 class="username">
            {{discuss.username}}
          </h2>
          <p class="discuss_context">
            {{discuss.context}}
          </p>
          <p class="time">
            {{comment.user.time}}
          </p>
          <!-- </view> -->
        </view>
      </view>
    </view>
    <view class="input">
      <u--input placeholder="发布一条友善的评论" border="surround" v-model="pub" @change="change" type="text" clearable shape="circle" :customStyle="{width:'500rpx'}"></u--input>
      <button @click="pub_discuss">发布</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        comment: {
          user: {
            avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
            username: '梓枫',
            time: '2022-12-02',
          },
          title: 'Vue的数据双向绑定的原理是什么',
          course: '前端设计',
          discuss: [{
              username: '张三',
              avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
              context: 'Vue2通过defineProperty进行数据劫持，然后通过发布与订阅将数据做响应式',
              time: '2022-12-2'
            },
            {
              username: '李四',
              avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
              context: '楼上说得对',
              time: '2022-12-2'
            },
            {
              username: '王五',
              avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
              context: '楼上说得对',
              time: '2022-12-2'
            }
          ]
        },
        type: "warning",
        value: 100,
        pub: ''
      };
    },
    methods: {
      change(e) {
        console.log('change', e);
      },
      pub_discuss() {
        let discuss = {
              username: '张三',
              avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
              context: this.pub,
              time: '2022-12-2'
            }
        this.comment.discuss.unshift(discuss)
        this.pub = ''
      },
      add_comment(e) {
        console.log(e);
      },
    },
  }
</script>

<style lang="less">
  page {
    background-color: #fff;
  }

  .comment {

    .title {
      padding: 20rpx 20rpx 40rpx 20rpx;
      border-end-end-radius: 30rpx;
      border-end-start-radius: 30rpx;
      box-shadow: 2rpx 2rpx 4rpx 4rpx #ebebeb;

      .userInfo {
        display: flex;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }

        .right {
          padding: 0 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .username {
            font-size: 36rpx;
            font-weight: 600;
          }

          .right_context {
            font-size: 26rpx;
            font-weight: 400;
          }
        }
      }

      .context {
        margin: 20rpx;
        font-size: 36rpx;
        font-weight: 550;
      }
    }

    .commentInfo {
      padding: 20rpx 20rpx 140rpx 20rpx;
      margin-top: 50rpx;
      border-start-start-radius: 30rpx;
      border-start-end-radius: 50rpx;

      // box-shadow: -2rpx -2rpx 4rpx 4rpx #ebebeb;
      .tip {
        font-size: 40rpx;
        font-weight: 600;
        color: #55aaff;
      }

      .discuss {
        margin: 10rpx 0;
        padding: 20rpx 10rpx;
        display: flex;
        box-shadow: 2rpx 2rpx 4rpx 4rpx #ebebeb;
        border-radius: 10rpx;

        image {
          flex: 1;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }

        .discuss_right {
          flex: 6;
          margin-left: 20rpx;

          .username {
            color: #41a863;
            font-weight: 550;
          }

          .discuss_context {
            margin-top: 20rpx;
            font-size: 30rpx;
            font-weight: 550;
          }

          .time {
            margin-top: 20rpx;
            font-size: 26rpx;
          }
        }
      }
    }

    .input {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      width: 100%;
      height: 80rpx;
      background-color: #fff;
      border-top: 2rpx solid #ebebeb;
      button {
        background-color: #fff
      }
    }
  }
</style>
